<template>
  <div class="app-container">
    <el-drawer :modal-append-to-body="false" :append-to-body="true" title="供应商结算明细" size="68%" :withHeader="false"
      :visible.sync="gradeDialogGrouping" @close="gradeCloseDialogGrouping" :show-close="true">
      <div style="position: relative">
        <div class="drawerTitle">
          <span>供应商结算明细</span>
          <div class="close" @click="gradeCloseDialogGrouping">
            <i class="el-icon-close" style="font-size: 24px;"></i>
          </div>
        </div>
      </div>
      <div style="padding: 20px 20px 0 20px;">
        <div class="infoViews">
          <div class="status">
            <span>状态:</span>
            <i v-if="detailsobj.status == 1">正常</i>
            <i v-else style="color: #f78989">已禁用</i>
          </div>
          <el-descriptions>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
              label="供应商">{{
                detailsobj.supplier_name ? detailsobj.supplier_name : "-"
              }}</el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
              label="联系人">{{
                detailsobj.responsible_person
                  ? detailsobj.responsible_person
                  : "-"
              }}</el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
              label="联系电话">{{
                detailsobj.supplier_mobile ? detailsobj.supplier_mobile : "-"
              }}</el-descriptions-item>

            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
              label="等级">{{
                detailsobj.SupplierInfo
                  ? detailsobj.SupplierInfo.LevelName
                  : "-"
              }}</el-descriptions-item>
            <el-descriptions-item labelClassName="descriptionsLabel" content-class-name="descriptionsContent"
              label="覆盖区域">{{ detailsobj.province_name ? detailsobj.province_name : "-"
              }}{{
                detailsobj.city_name ? detailsobj.city_name : "-"
              }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="grouping" style="margin-top: 20px;padding: 0 20px 20px;">
        <div class="marginBottom">
          <el-row :gutter="20" style="display: flex">
            <el-col>

            </el-col>
            <el-col :span="8" style="float: right">
              <div class="right-panel el-button-group">
                <el-button icon="el-icon-refresh" size="mini" @click="resettingWay" />
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button icon="el-icon-s-operation" size="mini" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col>
            <el-table v-loading="loading" :data="GoodsLists" :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }" style="width: 100%">
              <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                align="center">
                <template slot-scope="scope">
                  <div v-if="fruit == 'batch_number'">
                    <el-tooltip placement="top-start" :content="scope.row.batch_number + ''">
                      <div class="one_line_hidden" style="color: #1890ff;">
                        {{ scope.row.batch_number ? scope.row.batch_number : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'start_time'">
                    <el-tooltip placement="top-start" :content="scope.row.start_time + '~'+ scope.row.end_time +''">
                      <div class="one_line_hidden">
                        {{scope.row.start_time + '~' + scope.row.end_time}}
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" fixed="right" width="200" prop="address" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="Ramedetail(scope.row)">
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class="marginTop" style="text-align: right">
            <el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="count"
              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </el-col>
        </el-row>
      </div>
    </el-drawer>
    <orderdetail ref="reforder" />
  </div>
</template>

<script>
  import orderdetail from './orderdetail.vue'
  import {
    getSupplierInfo
  } from "@/api/supplier/index";
  import {
    orderList
  } from '@/api/supliersettent/index'

  const tableTheadOption = {
    id: {
      label: 'ID',
      field: 'id'
    },
    trade_no: {
      label: '订单号',
      field: 'trade_no'
    },
    goods_id: {
      label: '商品ID',
      field: 'goods_id'
    },
    goods_name: {
      label: '商品名称',
      field: 'goods_name'
    },
    buy_number: {
      label: '数量',
      field: 'buy_number'
    },
    cost_price: {
      label: '成本价',
      field: 'cost_price'
    },

    pay_total: {
      label: '结算金额',
      field: 'pay_total'
    },
  }
  const allTableThead = ['id', 'goods_id', 'goods_name', 'buy_number', 'cost_price', 'trade_no', 'pay_total']
  const defaultTableThead = ['id', 'goods_name', 'buy_number', 'cost_price', 'trade_no', 'pay_total']
  export default {
    components: {
      orderdetail
    },
    data() {
      return {
        detailsobj: {
          status: '',
          supplier_name: '',
          responsible_person: '',
          supplier_mobile: '11'
        },
        gradeDialogGrouping: false,
        // 动态显示表头默认表头
        tableTheadOptions: tableTheadOption,
        allTableThead: allTableThead,
        tableThead: defaultTableThead, // 默认表头
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: false,
        GoodsLists: [],
        // 商品列表总条数
        total: 0,
        page: 1,
        count: 10,
        ids: [],
        idss: ''
      }
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        )
        this.tableKey = this.tableKey + 1
      }
    },
    methods: {
      //商品详情
      Ramedetail(row) {
        this.$refs.reforder.open(row.order_id)
      },
      // 重置搜索条件
      resettingWay() {
        this.page = 1
        this.count = 10
        this.getListWay()
      },
      // 关闭弹框
      gradeCloseDialogGrouping() {
        this.gradeDialogGrouping = false
      },
      opens(ids, id) {
        this.idss = ids
        this.gradeDialogGrouping = true
        getSupplierInfo({
          id: id
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.detailsobj = res.data;
        });
        this.getListWay(2)
      },
      open(ids, id) {
        this.ids = ids
        this.gradeDialogGrouping = true
        getSupplierInfo({
          id: id
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.detailsobj = res.data;
        });
        this.getListWay()
      },
      // 获取商品列表
      getListWay(type) {
        let param
        if (type == 2) {
          param = {
            page: this.page,
            count: this.count,
            params: {
              id: this.idss,
              ids: []
            }
          }
        }else{
          param = {
            page: this.page,
            count: this.count,
            params: {
              id: '',
              ids: this.ids
            }
          }
        }
        this.loading = true
        orderList(param)
          .then((res) => {
            if (res.code !== 200 && res.status !== 1) {
              this.loading = false
              this.$messages.error(res.msg);
              return;
            }
            this.loading = false
            this.GoodsLists = res.data.list
            this.total = res.data.total
          })
          .catch(() => {
            this.loading = false
          })
      },
      // 分页选择调用
      handleSizeChange(val) {
        this.count = val
        this.getListWay()
      },
      // 分页选择调用
      handleCurrentChange(val) {
        this.page = val
        this.getListWay()
      },
    }
  }
</script>


<style lang="scss" scoped>
  .infoViews {
    position: relative;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 5px;

    .status {
      position: absolute;
      top: 20px;
      right: 20px;

      span {
        font-size: 14px;
        color: #4e5969;
      }

      i {
        font-style: normal;
        font-size: 14px;
        color: #85ce61;
        margin-left: 10px;
      }
    }

    .descriptionsLabel {
      width: 65px;
      font-size: 14px;
      color: #383838;
    }

    .descriptionsContent {
      font-size: 14px;
      color: #383838;
    }
  }
</style>
